<template>
  <div class="infowrap3">
    <div class="titlecommon">农场信息</div>
    <div class="panwrap">
      <div class="panelben panelben2">
        <div class="titlecommon2">
          <span class="span"> 地块信息 </span>
          <el-select
            @change="yearChange"
            v-model="searchForm.value.selectedYear"
            class="m-2"
            placeholder="请选择"
            size="default"
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="content2">
          <div class="cc" v-for="(item, index) in menu.value" :key="index">
            <div class="cct">
              {{ item.name }}
            </div>
            <div class="cct2">
              <img :src="item.pic" class="icon" alt="" />
              {{ item.num }}
            </div>
          </div>
        </div>
      </div>
      <div class="panelben panelbenmin">
        <div class="titlecommon2">
          <span> 农场操作 </span>
        </div>
        <div class="btnwrap">
          <div
            v-for="(item, index) in handleArr"
            :key="index"
          >   
            <div
              v-if="(userRole == 'admin-farmer')||(userRole != 'admin-farmer'&&item.name=='农场地图')"
              class="btnc"
              @click="handleClickBtn(index)"
            >
              <img :src="item.pic" class="icon2" alt="" />
              {{ item.name }}
            </div>
          </div>  
        </div>
      </div>
    </div>

    <div class="panelben panelben3">
      <div class="titlecommon2">
        <span> 种植地块 </span>
      </div>
      <div class="chooseDiy">
        <div class="left leftselect">
          <div class="one">
            <span>地块名称:</span>
            <el-select
              v-model="searchForm.value.plotId"
              class="m-2"
              placeholder="按地块名称筛选"
              size="default"
            >
              <el-option
                v-for="item in plotOptionList.value"
                :key="item.id"
                :label="item.plotName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="one">
            <span>种植作物:</span>
            <el-select
              @change="cateChangeHandle"
              v-model="searchForm.value.cropsCategoryId"
              class="m-2"
              placeholder="按种植作物筛选"
              size="default"
            >
              <el-option
                v-for="item in cropsCategoryOptions.value"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="one">
            <span>种植品种:</span>
            <el-select
              v-model="searchForm.value.cropsSubclassId"
              class="m-2"
              placeholder="按种植品种筛选"
              size="default"
            >
              <el-option
                v-for="item in cropsSubclassOptions.value"
                :key="item.id"
                :label="item.cropsSubclassName"
                :value="item.id"
              />
            </el-select>
          </div>
          <!-- <div class="one">
              <span>地块组:</span>
              <el-select v-model="searchForm.value.plotGroupId" class="m-2" placeholder="按地块组筛选" size="default">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div> -->
          <!-- <div class="one">
              <span>所在地区:</span>
              <el-select v-model="searchForm.value.plotId" class="m-2" placeholder="输入所在区域" size="default">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div> -->
        </div>
        <div class="right">
          <div class="btn3" @click="getPlotList">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            查询
          </div>
          <div class="btn3 btn4" @click="reSet">
            <el-icon><Refresh /></el-icon>
            重置
          </div>
        </div>
      </div>
      <div class="content4">
        <div
          class="cchild"
          v-for="(item, index) in plotList.value"
          :key="index"
          @click="goDetail(item)"
        >
          <div class="p1">
            <span class="big" @click="goDetail(item)">{{ item.plotName }}
              <img v-if="item.sign" class="hq" src="@/assets/img/hq.png" alt="" />
            </span>
            
          </div>
          <div class="p1 p1end">
            <div class="pbtn">
              <!-- <div class="pbnt1 flexcenter" @click="goDetail(item)">编辑</div> -->
                <div
                  v-if="userRole != 'admin-farmer'&&item.sign!=1"
                  class="pbnt1 pbnt2 flexcenter pbnt2add"
                  @click.stop="setSign(item.id,true)"
                >
                  设为示范
                </div>
                <div
                  v-if="userRole != 'admin-farmer'&&item.sign==1"
                  class="pbnt1 pbnt2 flexcenter"
                  @click.stop="setSign(item.id,false)"
                >
                  取消示范
                </div>
                <div
                  v-if="userRole == 'admin-farmer'"
                  class="pbnt1 pbnt2 flexcenter pbnt24"
                  @click.stop="deleteOnePlot(item.id)"
                >
                  删除
                </div>
            </div>
          </div>
          
          <div>
            <div class="p2">
              <div class="p2left">
                <!-- <img class="zz" :src="item.pic1" alt=""> -->
                <div class="text">
                  <div class="label">种植作物</div>
                  <div class="name" v-if="item.plantingInfoPropList.length > 0&&item.plantingInfoPropList[0]['categoryName']">
                    {{ item.plantingInfoPropList[0]["categoryName"] }}
                  </div>
                  <div class="name" v-else>暂无信息</div>
                </div>
              </div>
              <div class="p2left">
                <!-- <img class="zz" :src="item.pic2" alt=""> -->
                <div class="text">
                  <div class="label">种植品种</div>
                  <div class="name" v-if="item.plantingInfoPropList.length > 0&&item.plantingInfoPropList[0]['cropsSubclassName']">
                    {{ item.plantingInfoPropList[0]["cropsSubclassName"]}}
                  </div>
                  <div class="name" v-else>暂无信息</div>
                </div>
              </div>
            </div>
            <div class="p3">
              <div class="p3child">
                <div class="p3label">地块面积(亩)</div>
                <div class="num">
                  {{ item.plotArea?parseFloat(item.plotArea).toFixed(2):'-' }}
                </div>
              </div>
              <div class="p3child">
                <div class="p3label">种植面积(亩)</div>
                <div class="num">{{ item.plotArea?parseFloat(item.plotArea).toFixed(2):'-' }}</div>
              </div>
              <div class="p3child">
                <div class="p3label">物联设备(台)</div>
                <div class="num">
                  {{ item.deviceCount }}
                </div>
              </div>
              <div class="p3child">
                <div class="p3label">在线设备(台)</div>
                <div class="num">
                  {{ item.onLineDeviceCount }}
                </div>
              </div>
              <div class="p3child">
                <div class="p3label">异常设备(台)</div>
                <div class="num">
                  {{ item.abnormalDeviceCount }}
                </div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="fy">
            <div class="total flexcenter">
              共 <span>{{ total }}</span>项数据
            </div>
            <el-pagination background
              :currentPage="pageNum"
              :page-size="12"
              @current-change="currentChange"
            layout="prev, pager, next" :total="total" />
        </div>
      </div>
    </div>

    <farm
      ref="farm"
      :option="plotOptionList.value"
      :farmResourceCateOption="farmResourceCateOption.value"
      
    />
    <quandi ref="quandi" />
    <group ref="group" :list="plotOptionList.value"/>
    <addplant @updatePlant="updatePlant"  :plotList="plotList.value" ref="addplantRef" />
  
    
  </div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import {
  defineComponent,
  computed,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from "vue";
import farm from "./modal/farm.vue";
import quandi from "./modal/quandi.vue";
import group from "./modal/group.vue";
import { useRouter } from "vue-router";
import { post, get, deletePost } from "@/public/request/api";
import { ElMessageBox } from "element-plus";
import storage from "@/store";
import addplant from '../plantingType/modal/addPlantType.vue'
import bus from '@/utils/bus'
import moment from "moment";
export default defineComponent({
  components: {
    farm,
    quandi,
    group,
    addplant
  },
  setup() {
    const userRole = storage.state.userRole;
    console.log("userRole", userRole);
    let formPlantType = reactive({
      value: {
        type: "",
        name: "",
        number: "",
        source: "",
        unit: "",
        remark: "",
        id: "",
      },
    });
    let overFlag = computed({
      get() {
        return (
          formPlantType.value.type &&
          formPlantType.value.name &&
          formPlantType.value.number &&
          formPlantType.value.source &&
          formPlantType.value.unit &&
          formPlantType.value.remark
        );
      },
      set(value) {},
    });
    //变量
    const yearOptions = [
      {
        value:moment().subtract(2, "years").format("YYYY") ,
        label:moment().subtract(2, "years").format("YYYY") ,
      },
      {
        value: moment().subtract(1, "years").format("YYYY"),
        label: moment().subtract(1, "years").format("YYYY"),
      },
      {
        value: moment().format("YYYY"),
        label: moment().format("YYYY"),
      },
    ];
    const areaOptions = [
      {
        value: "",
        label: "地块1",
      },
      {
        value: "",
        label: "地块2",
      },
      {
        value: "",
        label: "地块33333111",
      },
    ];
    let plotOptionList = reactive({
      value: [],
    });
    let farmResourceOption = reactive({
      value: [],
    });
    const dialogVisible = ref(false);
    const value = ref("");
    const router = useRouter();
    const options = [
      {
        value: "1",
        label: "地块01",
      },
    ];
    const menu = reactive({
      value: [
        {
          name: "地块数量(块)",
          pic: require("@/assets/img/c1.png"),
          num: '-',
        },
        {
          name: "地块面积(亩)",
          pic: require("@/assets/img/c2.png"),
          num: '-',
        },
        // {
        //   name:'当前种植面积(亩)',
        //   pic:require('@/assets/img/c3.png'),
        //   num:4
        // },
        // {
        //   name:'种植地占比(%)',
        //   pic:require('@/assets/img/c4.png'),
        //   num:4
        // },
        {
          name: "当前种植品种(种)",
          pic: require("@/assets/img/c5.png"),
          num: '-',
        },
      ],
    });
    const areaArr = [
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
    ];
    const handleArr = [
      {
        pic: require("@/assets/img/p1.png"),
        name: "圈地",
      },
      
      {
        pic: require("@/assets/img/p3.png"),
        name: "农事操作",
      },
      {
        pic: require("@/assets/img/p4.png"),
        name: "新增种植",
      },
      {
        pic: require("@/assets/img/p5.png"),
        name: "农场地图",
      },
      {
        pic: require("@/assets/img/p2.png"),
        name: "地块编组",
      },
    ];
    let thisYear=parseInt(moment().format("YYYY"))
    let searchForm = reactive({
      value: {
        plotId: "",
        selectedYear:thisYear,
        cropsCategoryId: "",
        cropsSubclassId: "",
        plotGroupId: "",
      },
    });
    let cropsCategoryOptions = reactive({
      value: [],
    });
    let cropsSubclassOptions = reactive({
      value: [],
    });
    let plotList = reactive({
      value: [],
    });
    let total=ref(0)
    let pageNum=ref(1)
    let farmResourceCateOption = reactive({
      value: [],
    });
    let realPlotList=reactive({
      value:[]
    })
    // 生命周期
    onMounted(() => {
      bus.on('changeBase', mapInit);
      mapInit()
    });

    onUnmounted(() => {
      bus.off('changeBase')
    });
    function updatePlant(){
      getPlotList()
    }
    function setSign(id,flag){
      
      post("/plot/setOrUnSetDemonstration", {
        "id": id,
	      "sign": flag?1:0
      }).then((res) => {
        ElMessage({
          message: "设置成功",
          type: "success",
        });
        getPlotList();
      })
    }
    function mapInit(){
      console.log('切换基地了！！')
      getPlotOptionsList();
      //getFarmResourceOption()
      getFarmResourceCategory();
      getPlotList();
      getCount();
      getCropsCategoryOptions();
      //getCropsSubclassOptions()
      //mapRef.value.init();
    }
    //methods
    function reSet() {
      searchForm = reactive({
        value: {
          plotId: "",
          selectedYear: 2023,
          cropsCategoryId: "",
          cropsSubclassId: "",
          plotGroupId: "",
        },
      });
      getPlotList();
    }
    function getPlotOptionsList() {
      get("/plot/options", {
        isExclude:1,
      }).then((res) => {
        plotOptionList.value = res.data;
      });
    }
    function getCount() {
      get("/plot/profile", {
        selectedYear: searchForm.value.selectedYear,
      }).then((res) => {
        menu.value[0]["num"] = res.data.plotCount;
        menu.value[1]["num"] = res.data.plotAreaSum.toFixed(0);
        // menu.value[2]['num']=res.data.plantationAreaSum.toFixed(0)
        // menu.value[3]['num']=res.data.plantRate
        menu.value[2]["num"] = res.data.cropsSubclassCount;
      });
    }
    function getFarmResourceCategory() {
      get("/farmResource/category/options", {}).then((res) => {
        farmResourceCateOption.value = res.data;
      });
    }
    function getFarmResourceOption(id) {
      console.log("父子");

      get("/farmResource/options", {
        farmResourceCategoryId: id,
      }).then((res) => {
        farmResourceOption.value = res.data;
      });
    }
    function getCropsCategoryOptions() {
      get("/crops/cropsCategoryOptions", {}).then((res) => {
        cropsCategoryOptions.value = res.data;
      });
    }
    function getCropsSubclassOptions(id) {
      get("/crops/cropsSubclassOptions", {
        cropsCategoryId: id,
      }).then((res) => {
        cropsSubclassOptions.value = res.data;
      });
    }
    function cateChangeHandle(e) {
      getCropsSubclassOptions(e);
    }
    function goDetail(item) {
      sessionStorage.setItem('plotDetail',JSON.stringify(item))
      router.push({
        path: "/plantingType/detail",
        query: {
          id: item.id,
          name: item.plotName,
          year:searchForm.value.selectedYear
        },
      });
    }
    function currentChange(e){
      console.log('eeeeeeeeeeee----------eee',e)
      pageNum.value=e
      let s=(pageNum.value-1)*12
      let end=(pageNum.value)*12
      plotList.value=realPlotList.value.slice(s,end)
      
    }
    function getPlotList() {
      get("/plot/meta", searchForm.value).then((res) => {
        realPlotList.value=JSON.parse(JSON.stringify(res.data))
        plotList.value = res.data.slice((pageNum.value-1)*12,12)
        total.value=realPlotList.value.length
      });
    }
    const addplantRef=ref(null)
    function handleClickBtn(index) {
      if (index == 0) {
        this.$refs.quandi.page = 1;
        this.$refs.quandi.dialogVisible = true;
      }
      if (index == 3) {
        bus.emit('menuChange', 0);
        router.push({ path: "/farmlandData/statistics" });
      }
      if (index == 2) {
        addplantRef.value.dialogVisible=true
      }
      if (index == 1) {
        this.$refs.farm.dialogVisible = true;
        this.$refs.farm.init();
      }
      if (index == 4) {
        this.$refs.group.dialogVisible = true;
      }
    }
    function deleteOnePlot(id) {
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          delHandel(id);
        })
        .catch(() => {
          // catch error
        });
    }
    function delHandel(id) {
      deletePost("/plot/del", {
        id,
        selectedYear: searchForm.value.selectedYear,
      }).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getPlotList();
      });
    }
    function yearChange(){
      getPlotList()
      getCount()
    }
    // return
    return {
      updatePlant,
      setSign,
      yearChange,
      pageNum,
      currentChange,
      total,
      addplantRef,
      userRole,
      deleteOnePlot,
      overFlag,
      formPlantType,
      cateChangeHandle,
      farmResourceCateOption,
      reSet,
      cropsSubclassOptions,
      cropsCategoryOptions,
      plotList,
      searchForm,
      getPlotList,
      plotOptionList,
      farmResourceOption,
      menu,
      handleArr,
      options,
      value,
      areaArr,
      goDetail,
      dialogVisible,
      handleClickBtn,
      areaOptions,
      yearOptions,
      getFarmResourceOption
    };
  },
});
</script>


<style lang="scss">
.m-2 {
  margin: 0 !important;
}
.infowrap3 {
  .el-select .el-input__wrapper {
    width: 535px;
    border: none !important;
    height: 33px;
    background: rgba(255, 255, 255, 0.08);
  }
  .el-select--large {
    line-height: 30px !important;
    height: 30px !important;
  }
}
.leftselect {
  .el-select .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
  }
}
.titlecommon2 {
  .el-select {
    width: 100px;
  }
}
</style>
<style lang="scss">

  .el-table th.el-table__cell,.el-table .el-table__cell,.el-table tr,.el-table--fit{
    background: transparent!important;
    color: #fff!important;
  }
  .el-table th.el-table__cell.is-leaf,.el-table td.el-table__cell{
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)!important
  }
  .el-pagination.is-background .el-pager li{
    background: transparent!important;
    color: #fff!important;
  }
  .el-pagination.is-background .btn-next{
    background: none!important;
  }
  .btn-prev{
    background: none!important;
  }

</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.panelbenmin{
  min-height: 214px;
}
.fy{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .total{
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;
      span{
        font-size: 20px;
      }
    }
    
}
.titlecommon2 {
  display: flex;
  align-items: center;
  .span {
    margin-right: 5px;
  }
}
.p1end{
  justify-content: flex-end!important;
  margin-bottom: 8px!important;
}
.infowrap3 {
  .content4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cchild {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 20px;
      width: 24%;
      margin-top: 20px;
      margin-right: 10px;
      cursor: pointer;
      .big {
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        .hq{
          width: 18px;
          margin-left: 10px;
        }
      }
      .p3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .p3child {
          width: 49%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          .p3label {
            color: rgba(255, 255, 255, 0.6);
          }
          .num {
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
      .p2 {
        display: flex;
        justify-content: space-around;
        .text {
          margin-left: 15px;
        }
        .p2left {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
            display: flex;
            justify-content: center;
          }
          .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
          }
        }
        .zz {
          width: 60px;
          padding: 3px;
          background: #fff;
          border-radius: 300px;
        }
      }
      .p1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .pbtn {
          display: flex;
          align-items: center;
          .pbnt1 {
            background: rgba(9, 127, 229, 1);
            border-radius: 5px;
            font-size: 10px;
            padding: 2px 10px;
            margin-bottom: 7px;
            line-height: 20px;
            box-sizing: border-box;
            cursor: pointer;
          }
          .pbnt2 {
            background: rgba(255, 255, 255, 0.16) !important;
            margin-left: 10px;
          }
          .pbnt2add{
            background: rgba(9, 127, 229,1)!important;
          }
        }
      }
    }
  }
  
  .panelben3 {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    .btnc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 20px;
      padding: 10px 14px;
      margin-top: 10px;
      border-radius: 5px;
      background: rgba(9, 127, 229, 1);
      cursor: pointer;
    }
    .icon2 {
      width: 14px;
      margin-right: 6px;
    }
  }

  .content2 {
    display: flex;
    align-items: center;

    margin-top: 20px;
  }
  .cc {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    margin-right: 15px;
    width: 21%;
    .cct2 {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
      align-items: center;
      .icon {
        width: 50px;
        margin-right: 12px;
      }
    }
  }
}
</style>
